<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .active {
        color: red;
        font-size: 24px;
        background-color: green;
      }
    </style>
  </head>
  <body>
    <div class="box">box</div>
    <button class="btn">切换</button>

    <script>
      // 需求：点击box，更改样式
      // 1.获取boxEl
      var boxEl = document.querySelector(".box");

      // 2.监听点击
      var counter = 1;
      boxEl.onclick = function () {
        // (1).直接修改style
        // boxEl.style.color = "red"
        // boxEl.style.fontSize = "24px"
        // boxEl.style.backgroundColor = "green"

        // (2).动态的添加某一个class
        boxEl.className = "active";

        // (3).动态的修改boxEl的宽度
        boxEl.style.width = 100 * counter + "px";
        counter++;
      };

      // 需求: box在active之间切换
      var btnEl = document.querySelector(".btn");
      btnEl.onclick = function () {
        // if (boxEl.classList.contains("active")) {
        //   boxEl.classList.remove("active")
        // } else {
        //   boxEl.classList.add("active")
        // }
        boxEl.classList.toggle("active"); //动态添加类名
      };

      // 获取box
      // var boxEl = document.querySelector(".box");

      // class属性
      // 需求：修改class
      // 1.方法一: className 会覆盖原来的class
      // boxEl.className = "abc"

      // var obj = {}
      // obj.name = "abc"
      // obj.class = "hahahaha"
      // obj.var = 123
      // console.log(obj)

      // 2.方法二: classList操作class
      // boxEl.classList.add("abc");
      // boxEl.classList.add("active");
      // boxEl.classList.remove("abc");
      // toggle 切换(有则除，无则加) contains 包含
    </script>

    <script>
      // style属性
      <div class="box" style="background-color: aqua; color: white;">
        我是box
      </div>;
      var boxEl = document.querySelector(".box");

      // 1.在property中使用的驼峰格式
      // console.log(boxEl.style.backgroundColor)

      // 2.如果将一个属性的值, 设置为空的字符串, 那么是使用默认值
      // boxEl.style.display = ""
      // boxEl.style.fontSize = ""

      // 3.设置多个样式
      // boxEl.style.fontSize = "30px"
      // boxEl.style.color = "red"
      boxEl.style.cssText = "font-size: 30px; color: red;";
    </script>

    <!-- style读取 -->
    <div class="box" style="background-color: red">我是box</div>

    <script>
      var boxEl = document.querySelector(".box");
      console.log(boxEl.style.backgroundColor); //只能读取内联样式
      // console.log(boxEl.style.fontSize)
      console.log(getComputedStyle(boxEl).fontSize);
    </script>

    <div id="abc" class="box" data-age="18" data-height="1.88"></div>

    <!-- H5中的dataset -->
    <script>
      var boxEl = document.querySelector(".box"); //标准属性
      // 小程序开发中使用
      console.log(boxEl.dataset.age); //自定义属性
      console.log(boxEl.dataset.height);
    </script>
  </body>
</html>
